<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: argentum
  Date: 2018/12/27
  Time: 15:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>分配角色</title>
    <%@ include file="../base/top.jsp" %>
    <!-- 下拉框 -->
    <link rel="stylesheet" href="static/ace/css/chosen.css"/>
    <!-- 日期框 -->
    <link rel="stylesheet" href="static/ace/css/datepicker.css"/>
</head>
<body class="no-skin">
<div class="main-container" id="main-container">
    <div class="main-content">
        <div class="main-content-inner">
            <div class="page-content">
                <div class="row">
                    <div class="col-xs-12">
                        <!-- PAGE CONTENT BEGINS -->
                        <h2 class="center smaller blue">分配角色</h2>
                        <form name="userForm" id="userForm">
                            <div class="col-sm-12" style="margin:0 auto">
                                <div>
                                    <table cellspacing="10px" style="margin-top:5px;">
                                        <tr>
                                            <td style="vertical-align:top;width: 120px;">
                                                <select id="type" class="chosen-select form-control" data-placeholder="账号类型" style="vertical-align:top;width: 120px;">
                                                    <option value=""></option>
                                                    <option value="0">学生</option>
                                                    <option value="1">教师</option>
                                                </select>
                                            </td>

                                            <td style="vertical-align:top;padding-left:10px;">
                                                <input id="id" type="text" placeholder="学号/工号"/>
                                            </td>
                                            <td style="vertical-align:top;padding-left:10px;">
                                                <input id="info" type="text" placeholder="班级/授课"/>
                                            </td>

                                            <td style="vertical-align:top;padding-left:20px;">
                                                <button type="button" class="btn btn-sm btn-success" onclick="searchAllUser()">
                                                    <i class="ace-icon fa fa-search smaller"></i>
                                                    搜索
                                                </button>
                                            </td>
                                        </tr>
                                    </table>
                                </div>

                            </div>
                            <!-- 检索  -->


                            <table id="data-table" width="80%" style="margin-left: 10%" class="table table-striped table-bordered">
                                <thead>
                                <tr>
                                    <th>
                                        全选<input type="checkbox" id="check-all"/>
                                    </th>
                                    <th id="userId">账号</th>
                                    <th>学号/工号</th>
                                    <th>角色</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>


                            <table style="width:200px;margin:0 auto">
                                <tr>
                                    <td  style="vertical-align:top;padding-left:2px;">
                                        <select id="roles" class="chosen-select form-control" data-placeholder="请选择角色" style="vertical-align:top;width:180px;">
                                            <option value=""></option>
                                            <c:forEach items="${roles}" var="roles" >
                                               <option value="${roles.roleId}">${roles.roleName}</option>
                                            </c:forEach>
                                        </select>
                                    </td>
                                    <td style="vertical-align:top;padding-left:20px;">
                                        <button class="btn btn-sm btn-success" type="button" onclick="distribute()">
                                            <i class="ace-icon fa fa-save smaller"></i>保存
                                        </button>
                                    </td>
                                </tr>
                            </table>

                        </form>
                    </div> <!-- PAGE CONTENT ENDS -->
                </div><!-- COL ENDS -->
            </div><!-- ROW ENDS -->
        </div>
    </div>
</div>
<!-- 页面底部js¨ -->
<%@ include file="../base/foot.jsp" %>
<!-- 删除时确认窗口 -->
<script src="static/ace/js/bootbox.js"></script>
<!-- 下拉框 -->
<script src="static/ace/js/chosen.jquery.js"></script>
<!-- ace scripts -->
<script src="static/ace/js/ace/ace.js"></script>
<!--提示框-->
<script type="text/javascript" src="static/js/jquery.tips.js"></script>
<!-- 日期框 -->
<script src="static/ace/js/date-time/bootstrap-datepicker.js"></script>

<script>
    var table = null;
    var columnsData =  [
        {
            bSortable : false,
            className : "text-left",
            width : "50px",
            render : function(data, type, row, meta) {
                return "<input type=\"checkbox\"/>";
            }
        },
        {'data': 'userId'},
        {'data': 'id'},
        {'data': 'roleName'},
    ];

    var url='user/listUser';
    var parameter ={

        };

    $(document).ready(function() {
        //下拉框
        if(!ace.vars['touch']) {
            $('.chosen-select').chosen({allow_single_deselect:true});
            $(window)
                .off('resize.chosen')
                .on('resize.chosen', function() {
                    $('.chosen-select').each(function() {
                        var $this = $(this);
                        $this.next().css({'width': $this.parent().width()});
                    });
                }).trigger('resize.chosen');
            $(document).on('settings.ace.chosen', function(e, event_name, event_val) {
                if(event_name != 'sidebar_collapsed') return;
                $('.chosen-select').each(function() {
                    var $this = $(this);
                    $this.next().css({'width': $this.parent().width()});
                });
            });
            $('#chosen-multiple-style .btn').on('click', function(e){
                var target = $(this).find('input[type=radio]');
                var which = parseInt(target.val());
                if(which == 2) $('#form-field-select-4').addClass('tag-input-style');
                else $('#form-field-select-4').removeClass('tag-input-style');
            });
        }

        table = $('#data-table').DataTable($.extend(true,{},CONSTANT.DATA_TABLES.DEFAULT_OPTION,{

            columns:columnsData,

            ajax: function (data,callback) {
                ajax(data,callback,columnsData,url,parameter);
            }
        }));
    });

    $("#delect-all").click(function () {
        console.log(getAllCheckedRowValue());
    });
</script>

<script>
    function searchAllUser() {
        url="<%=basePath%>user/listUserByAttr";
        parameter ={
                type : $('#type').val(),
                id :  $('#id').val(),
                info :  $('#info').val()
            };
        reloadDataTable();
    }

   function distribute() {
        var roleId = $('#roles option:selected') .val();
        var checked = getAllCheckedRowValue();
        var userIds = new Array();
       for (var index = 0; index < checked.length; index++) {
           userIds.push(checked[index].userId);
           prompt_alert('success',checked[index].userId,0);
       }
       var form = new FormData();
       form.append( "userIds",userIds);
       form.append( "roleId",roleId);

        if(roleId!=null)
            $.ajax({
                type:"POST",
                url:"user/distributeRole",
                data:form,
                dataType:"json",
                processData:false,
                contentType:false,
                success:function (data) {
                    if(data["success"]==true){
                        prompt_alert('success',"修改成功",0);
                        reloadDataTable();
                    }else{
                        prompt_alert('error',"修改失败",0);
                    }

               },
               error:function (){
                   prompt_alert('error',"请检查网络连接...",0);
               },
           });
    }
</script>
</body>
</html>
